<template>
  <div class="second-order">
    <cell class="order-item-list" v-for="(item,i) in datalist" :key="i">
      <x-icon class="ios-close-outline" type="ios-close-empty" size="20"  @click="$emit('remove')"></x-icon>
      <div class="top">
        <div class="left">
          <avatar username="Lairenna Doe" :src="item.creator && item.creator.avatar" :size="40"></avatar>
        </div>
        <div class="right">
          <div class="right-1">
            <div>
              {{item.creator && item.creator.nickname}}
              <!-- <span class="score">{{9.8}}分</span> -->
            </div>
            <div>
              <span>{{getTime(item.createTime)}}</span>
            </div>
          </div>
          <div class="right-2">
            <span class="order-price" v-show="item.price">¥{{item.price}}</span>
            <!-- <span class="order-status-btn" v-show="item.status===2">已完成</span> -->
          </div>
        </div>
      </div>
      <div class="main">
        <div class="main-title">{{item.title}}</div>
        <div class="con">{{item.content}}</div>
        <div class="img-list">
          <img v-for="(img,index) in item.imgs" :key="index" v-lazy="img.url" :src="img.url" @click.stop="" v-gallery="item.imgs">
        </div>
      </div>
    </cell>
  </div>
</template>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import Avatar from 'vue-avatar';
import { Cell } from 'vux';
import { formatMsgTime } from '../../js/getTime'
@Component({
  components: { Avatar, Cell }
})
export default class SecondOrder extends Vue {
  @Prop(Array) datalist
  imgEnLarge = false
  imgUrl = ''
  previewMethod (url) {
    this.imgUrl = url;
    this.imgEnLarge = true;
  }
  handleImgEnlarge () {
    this.imgEnLarge = false;
  }
  getTime (t) {
    return formatMsgTime(t * 1000)
  }
}
</script>
<style lang="less">
  .second-order {
    .main-title {
      font-size: 14px;
      color: #666666;
    }
    .bounce-enter-active {
      animation: bounce-in .3s;
    }
    .bounce-leave-active {
      animation: bounce-in .3s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      100% {
        transform: scale(1);
      }
    }
  .img {
      width: 100%;
      max-height: 90%;
    }
    .img-enlarge {
      z-index: 99999;
      position: fixed;
      background: #000000;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .order-item-list:before {
    content: initial !important;
  }
  .order-item-list {
    // font-size: 12px;
    background: #ffffff;
    direction: flex;
    border-radius: 10px;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 5px;
    position: relative;
    .main {
      padding: 0 10px;
      .con {
        line-height: 24px;
        padding-bottom: 10px;
        overflow: hidden;
        -webkit-line-clamp: 3;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .img-list {
        display: flex;
        width: 95%;
        align-items: center;
        flex-wrap: wrap;
        padding-bottom: 10px;
        img{
          width: auto;
          height: auto;
          max-width: 100%;
          max-height: 200px;
          min-height: 70px;
          min-width: 70px;
        }
      }
    }
    .score {
      color: #666666;
      font-size: 14px;
      margin-left: 10px;
    }
    .order-price {
      color: #666666;
      font-size: 16px;
      margin-right: 15px;
      line-height: 54px;
    }
    .ios-close-outline {
      position: absolute;
      top: 5px;
      right: 5px;
    }
    .weui-cell__ft {
      text-align: left;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      span {
        margin-left: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      i {
        margin-right: 5px;
        font-size: 18px;
        color: #EFA79B;
      }
    }
    .order-status-btn {
      padding: 2px 6px;
      border: 1px solid #999999;
      border-radius: 50px;
    }
    .item-title {
      color: #666666;
    }
    .con-head {
      font-size: 14px;
    }
    .top {
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .left {
      width: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .right {
      // font-size: 12px;
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .weui-btn {
        // font-size: 12px;
        overflow: initial;
      }
    }
    .right-1 {
      display: flex;
      flex-direction: column;
    }
    .right-2 {
      display: flex;
      align-items: center;
    }
    .bot {
      height: 48px;
      display: flex;
      align-items: center;
    }
  }
</style>


